<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    img{width:100px;}
    *{margin: 10px;padding: 10px;}
  </style>
</head>
<body>
  
</body>
<script>

  class Team{
    constructor(id){
      this.children = [];
      this.ele = document.createElement("div");
      this.ele.id = id;
    }
    add(child){
      this.children.push(child);
      this.ele.appendChild(child.ele);
    }
    remove(child){
      const index = this.children.indexOf(child);
      if(index !== -1){
        this.children.splice(index, 1);
        child.ele.remove();
      }
    }
    addBorder(){
      this.ele.style.border = "solid 4px black";
      this.children.forEach(val=>{
        val.addBorder();
      })
    }
    removeBorder(){
      this.ele.style.border = "none";
      this.children.forEach(val=>{
        val.removeBorder();
      })
    }
  }

  class Item{
    constructor(src){
      this.ele = document.createElement("img");
      this.ele.src = src;
    }
    add(){
      console.log("这是一个叶对象，不能再添加子对象了")
    }
    remove(){
      console.log("这是一个叶对象，没有子对象可被删除")
    }
    addBorder(){
      this.ele.style.border = "solid 4px red";
    }
    removeBorder(){
      this.ele.style.border = "none";
    }
  }

  const img1 = new Item("https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF");
  const img2 = new Item("https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF");
  const img3 = new Item("https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF");
  const img4 = new Item("https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF");

  const box1 = new Team("box1");
  const box2 = new Team("box2");
  const box3 = new Team("box3");
  const box4 = new Team("box4");
  const box5 = new Team("box5");

  box1.add( box2 );
  box1.add( box3 );
  box1.add( img2 );

  box2.add( box4 );
  box3.add( img1 );

  box4.add( img3 );
  box4.add( box5 );

  box5.add( img4 );

  document.body.appendChild(box1.ele);

  //   box1
  //     box2
  //       box4
  //         img3
  //         box5
  //           img4
  //     box3
  //       img1
  //     img2

  box1.addBorder();

  box2.removeBorder();

  box5.addBorder();


  
</script>
</html>